<template>
  <div class="container">
    <van-swipe
      :autoplay="0"
      :show-indicators="false"
      :loop="false"
      style="height: 100vh;"
      vertical
    >
      <van-swipe-item>
        <first-page />
      </van-swipe-item>
      <van-swipe-item>
        <second-page />
      </van-swipe-item>
      <van-swipe-item>
        <third-page />
      </van-swipe-item>
      <van-swipe-item>
        <div class="page">4</div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import firstPage from './conponents/firstPage.vue';
import secondPage from './conponents/secondPage.vue';
import thirdPage from './conponents/thirdPage.vue';

export default {
  name: 'index',
  components: {
    firstPage,
    secondPage,
    thirdPage
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  .page {
    height: 100vh;
    background: antiquewhite;
  }
}
</style>
